<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../node_modules/react/umd/react.development.js'></script>
    <script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
    <script src='../node_modules/prop-types/prop-types.js'></script>
</head>

<body>
    <button id="btn">带有原生事件按钮</button>

    <script>
        /* 原生事件监听 */
        btn.onclick = function (e) {
            console.log("e in btn.onclick=", e);
        }
    </script>

    <div id='root'></div>

    <script type='text/babel'>
        class MyCom extends React.Component {

            constructor(props) {
                super(props)
            }

            /* 类组件中的箭头函数中的this就是当前实例 */
            fn1 = (e) => {
                console.log("e in fn = ", e);//SyntheticEvent
                console.log("native event=", e.nativeEvent);

                // 合成事件对象 支持原生事件对象的所有API
                console.log(e.target, e.pageX);
            }

            fn2(name, age, e) {
                console.log(name, age, e);
                e.target.innerText = "点你妹啊"
            }

            fn3 = (e) => {
                /* 注意在最后一位传递事件对象 */
                this.fn2("你妹", 60, e)
            }

            /* render方法中的this为当前组件实例=>JSX中的this也是当前实例 */
            render() {
                console.log("this in render=", this);
                return <div>
                    <button onClick={this.fn1}>fn1</button>

                    {/* 为fn2绑定name和age参数 */}
                    <button onClick={this.fn2.bind(this, "你妹", 60)}>fn2</button>

                    <button onClick={
                        (e) => {
                            /* 注意在最后一位传递事件对象 */
                            this.fn2("你妹", 60, e)
                        }
                    }>fn2</button>

                    <button onClick={this.fn3}>fn3</button>
                </div>
            }

        }

        ReactDOM.render(<MyCom />, document.getElementById('root'))
    </script>
</body>

</html>